<!--
 saveData() 保存数据的方法

------

 入参：
 flowId： 流程id
 nodeId： 节点id
 flowInstId： 流程实例id
 nodeInstId： 节点实例id
 isOperate:  操作类型  如果是insert，则会查询activity表，保存到 activity inst表中;
                       如果是update，则会查询activity inst表中，保存到 activity inst表中;
                       如果是不填或者其他，则会先去activity inst表中查询是否有对应节点实例的数据，如果有则返回，如果没有，则会去查询activity表，保存方法，会根据查询结果对应保存或者更新到activity inst表中;
-->
<template>
  <div style="position: relative;">
    <div class="tl-form-line-title" v-if="visible" style="display: block">
      流程活动
    </div>
    <div style="padding-left:15px;" class="flow-activity" v-if="visible">
          <el-timeline v-loading="loading">
            <el-timeline-item v-for="(data, index) in datas" :key="index" type='primary' color='#0A966E' size='large' :timestamp="data.starttime" placement="top">
              <el-card>
                <h4>名称：{{data.name}}</h4>
                <ul>
                  <li>
                    <p><span class="operate">活动内容：</span><span class="column"> {{data.introduce}} </span></p>
                  </li>
                  <li>
                    <p><span class="operate">参与人员：</span><span class="column"> {{data.usernames}} </span></p>
                  </li>
                  <li>
                    <p><span class="operate">结束时间：</span><span class="column"> {{data.endtime}}</span></p>
                  </li>
                  <li>
                    <p><span class="operate">地点：</span><span class="column"> {{data.place}} </span></p>
                  </li>
                </ul>
              </el-card>
            </el-timeline-item>
          </el-timeline>
      </div>
  </div>
</template>

<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
import { mixin_approval } from '@tapui/mixins/mixin_approval'
/** 子组件 */
/** 工具类 */
import { getAction, putAction } from '@tapui/utils/http'

/** VUE配置 */
export default {
  mixins: [mixin_list, mixin_approval],
  components: {},
  data() {
    return {
      moduleTitle: '流程活动',
      urlPrefix: '/base/flowActivity/',
      url: {
        // 额外的url
        list: '/base/flowActivityIns/queryListByTimeline'
      },
      isQueryOnCreated: false,
      model: {},
      pageInfo: {
        currentPage: 1, // 当前页面
        pageSize: 0, // 每页记录数
        pageSizes: ['10', '50', '100'],
        totalCount: 0 // 总数
      },
      approvalNodeModel: {},
      disableEditSubmit: false,
      visible: false,
      tableHeight: 0,
      id: '',
      flowid: 0,
      nodeid: 0,
      flowinsid: 0,
      nodeinsid: 0,
      saveLoading: false
    }
  },
  props: {
    render: {
      default: 'div',
      type: String
    },
    // 操作类型
    operate: {
      default: '',
      type: String
    },
    sourceType: {
      default: '',
      type: String
    }
  },
  methods: {
    close() { },
    resizeHandler() {
    },
    open() {
      this.visible = false
      // 页面加载完毕执行
      if (this.id) {
        this.filtersInfo.sourceid = this.id
      }
      if (this.sourceType) {
        this.filtersInfo.sourcetype = this.sourceType
      }
      if (this.operate) {
        this.filtersInfo.operate = this.operate
      }
      this.loadData()
    },
    /** 列表数据加载开始 */
    loadData(paramMap) {
      if (!this.beforeLoadData()) return
      // 查询条件
      var params = this.getQueryParams()
      // 数据查询
      this.loading = true
      getAction(this.url.list, params)
        .then((res) => {
          if (res.success) {
            this.datas = res.result
          } else {
            this.$tap.alert(res.message, 'warning')
          }
          this.afterLoadData()
          this.loading = false
        })
        .catch((err) => {
          this.loading = false
        })
    },
    afterLoadData() {
      if (!this.datas || this.datas.length === 0) {
        this.visible = false
        return
      }
      this.visible = true
      this.datas.forEach((item) => {
        if (item.hasOwnProperty('activityname')) {
          item.name = item.activityname
        }
      })
    }
  },
  created() {
    this.visible = false
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-scrollbar__wrap {
  overflow: scroll;
  height: 100%;
  overflow-x: hidden;
}
</style>
<style lang="scss">
.flow-activity {
  .el-timeline {
    padding-left: 10px;
    .el-card {
      margin-right: 10px;
    }
    .el-card__body {
      padding: 0 15px;
      h4 {
        margin: 15px 0 10px 0;
      }
      ul li {
        line-height: 24px;
        p {
          margin: 8px;
        }
      }
      .operate {
        color: #bbb;
      }
      .column {
        color: #0a966e;
      }
    }
  }
}
</style>
